<template>
  <div class="data-from-container" id="data-from-container">
      <form @submit.prevent="hanleSubmit" class="from-container"  ref="container">
          <div class="nickname item">
              <input type="text" class="nickname-input" maxlength="10" placeholder="用户昵称" v-model="fromData.nickname">
              <span class="toc">{{fromData.nickname.length}}/10</span>

          </div>
              <div class="error">{{error.nickname}}</div>

          <div class="content item">
             <textarea class="content-textarea" maxlength="300" placeholder="输入内容" v-model="fromData.content"></textarea>
              <span class="toc">{{fromData.content.length}}/300</span>
             
          </div>
           <div class="error">{{error.content}}</div>
        <div class="submit">
          <button class="but" :disabled="isSubmit" >{{isSubmit?"提交中...":"提交"}}</button>
        </div>
      </form>
  </div>
</template>

<script>
import { showMessage } from '../../utils'
export default {

    data(){
        return {
     fromData:{
     content:'',
     nickname:'',
     },
     error:{
         nickname:'',
         content:'',
     },
     isSubmit:false,
        }
    },
methods:{
    
hanleSubmit(){
    this.fromData.nickname?this.error.nickname="":this.error.nickname="兄台贵姓？"
    this.fromData.content?this.error.content="":this.error.content="幸蒙赐教！"
    if(this.error.nickname||this.error.content){
        return 
    }
    this.isSubmit=true;
    this.$emit('submit',this.fromData,(successMeg)=>{
  showMessage({
      content:successMeg,
       type: 'success',
       durtion:2000,
       container:this.$refs.container,
       callback:()=>{
        this.fromData.nickname='';
        this.fromData.content='';
        this.isSubmit=false;
       }
  })
})
}
}
}
</script>

<style lang="less" scoped>
@import "../../style/var.less";
.data-from-container{
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    .error{
            font-size:12px;
            color:red;
            margin-top:5px;
            margin-left: 10px;
        }
    .item{
         position: relative;
        margin-top: 20px;
        input,textarea{
           outline: none;
           border: 1px dashed @gray;
          border-radius: 5px;
          &:focus{
              border: 1px dashed @primary;
          }
        }
        
        .toc{
            position: absolute;
            font-size: 12px;
            bottom: 13px;
            right: -13px;
            color: @lightWords;
        }
    }
    .nickname{
         width: 40%;
    }
     .content{
       width: 80%;

     }
    .nickname-input{
        width: 100%;
        height: 3em;
        padding: 0 10px;
    }
    .content-textarea{
       width: 100%;
        height: 9em;
        padding: 10px 10px;
        // padding-bottom: 0;
        resize: none;
    }
    .but{
        margin-top: 30px;
        margin-left: 10px;
        width: 110px;
        height: 40px;
        border-radius: 3px;
        border: none;
        background:@primary ;
        color: #fff;
        font-size:16px;
        line-height: 40px;
        &:hover{
             background:darken(@primary,10%);
        }
        &:disabled{
            background:lighten(@primary,10%);
            cursor:nowrap
        }
    }
}
</style>